<template>
  <dv-border-box-12 class="networkOperator">
    <screenTitle :title="title" width="60%"/>
    <div class="networkOperator-content">
      <div class="user" v-for="item in userInfo">
        <div class="user-box">
          <div class="user-avatar-content">
            <div class="user-avatar">
              <img class="circle" src="../../../assets/image/circle.png" alt="">
            </div>
          </div>
          <div class="user-info-content">
            <div class="user-name-tag">
              <span class="user-name">{{ item.name }}</span>
              <span class="user-tag">{{ item.tag }}</span>
            </div>
            <div class="user-dept">
              <span>部门：{{ item.dept }}</span>
            </div>
          </div>
          <div class="user-seniority-content">
            <div class="seniority">
              <span>{{ item.seniority }} 年</span>
            </div>
            <div class="seniority-des">
              <span>在职司龄</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </dv-border-box-12>
</template>

<script>
import screenTitle from './screenTitle'
export default {
  name: 'networkOperator',
  components:{
    screenTitle,
  },
  data(){
    return{
      title: '网络监测员',
      userInfo:[
        { name: '小乔', tag: '中级工程师', dept: '网络监察部', seniority: '4'},
        { name: '东方曜', tag: '高级工程师', dept: '网络监察部', seniority: '8'},
        { name: '海月', tag: '初级工程师', dept: '网络监察部', seniority: '2'},
      ],
    }
  }
}
</script>

<style lang="scss" scoped>
.networkOperator{
  width: 100%;
  height: 100%;
  box-shadow: inset 0px 0px 20px #b7f1f3;
  border-radius: 10px;
}
.networkOperator-content{
  width: 90%;
  height: 70%;
  margin: 2% auto 0;
}
.user-box{
  width: 100%;
  height: 78px;
  display: flex;
  border-bottom: 1px solid rgba(26, 206, 233, 0.15);
}
.user-avatar-content{
  width: 24%;
  height: 58px;
  margin-top: 10px;
}
.user-info-content{
  width: 46%;
  height: 58px;
  margin-top: 10px;
  text-align: left;
  line-height: 29px;
}
.user-name{
  margin-right: 10px;
  font-weight: 600;
}
.user-tag{
  border: 1px solid #1acee9;
  padding: 3px;
  font-size: 12px;
  color: #1acee9;
  border-radius: 15px 10px 20px 20px;
  box-shadow: inset 0px 0px 5px #b7f1f3;
}
.user-dept{
  color: #d9d7d7;
}
.user-seniority-content{
  width: 30%;
  height: 58px;
  margin-top: 10px;
  line-height: 29px;
}
.user-avatar{
  width: 20px;
  height: 20px;
  background-image: url("../../../assets/image/user.png");
  background-repeat: no-repeat;
  background-size: 20px;
  margin-top: 19px;
  margin-left: 30px;
  position: relative;
}
.circle{
  width: 51px;
  height: 48px;
  position: absolute;
  top: -15px;
  left: -15px;
  animation: rotate 5s infinite linear;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
